import React, {Component} from 'react';
import './index.less';
import {
    getBusinessInfo,
    promptBox,
    toast,
    cacheTools,
    cardCache
} from 'nc-lightapp-front';
import QueryGridAction from "./functions/QueryGridAction";

const tableId = 'template';
let {setDefData} = cardCache;

class TableInfo extends Component {
    constructor(props) {
        super(props);
        this.state = {
            json: this.props.json,
            tableHeight: ''
        };
    }

    componentWillReceiveProps(nextProps) {
        let thisjson = JSON.stringify(this.props.json);
        let nextjson = JSON.stringify(nextProps.json);
        if (thisjson !== nextjson) {
            this.setState({
                json: nextProps.json
            })
        }
    }

    componentDidMount() {
        this.onWindowResize();
    }

    /**
     * 检测屏幕高度变化，修改table高度
     */
    onWindowResize = () => {
        let tableHeight = (window.innerHeight - 96) + 'px';
        this.updateState({
            tableHeight
        })
    };

    updateState(data, callback = () => {
    }) {
        this.setState(data, callback)
    }

    onRowClick = (props, tableid, record, index) => {
        // 保存 record 新增用
        setDefData('hrcm', 'basicsetting.templete', record);
        let pk_conmodel = record.values.pk_conmodel.value;
        this.props.updateState({
            pk_conmodel,
            selectedRow: { 
                ...record,
                index: index
            }
        }, () => {
            // 修改按钮状态
            this.props.updateButtonStatus();
        });
    };

    /**
     * 获取列表
     */
    getTableInfo(callback) {
        // 清空 record
        setDefData('hrcm', 'basicsetting.templete', null);
        this.props.updateState({
            pk_conmodel: null
        });
        QueryGridAction(this.props.pkOrg.value, this.props.pk_group).then(res => {
            // 清空表格
            this.emptyTable();

            // 如果存在callback 则调用callback （刷新用）
            if (callback && typeof callback === 'function') {
                callback(res);
            }

            if (res.data && res.data.grid.template) {
                let template = res.data.grid.template;
                this.setDisableTable(template.rows, res.data.isedit);
                this.props.editTable.setTableData(tableId, template);
                this.setButtonDisabled(template.rows.length < 1);
                if(template.rows.length > 0) {
                    this.props.editTable.focusRowByIndex(tableId, 0);
                    this.onRowClick(this.props, tableId, template.rows[0], 0)
                } 
            } else {
                this.setButtonDisabled(true);
            }
        })
    }

    setButtonDisabled(disabled) {
        // 设置按钮
        this.props.button.setButtonDisabled({
            modify: disabled,
            print: disabled,
            output: disabled
        });
    }

    /**
     * 设置不可被编辑的table数据
     */
    setDisableTable(rows, disableKey) {
        rows.forEach((item) => {
            if (item.values) {
                let pk_conmodel = item.values.pk_conmodel.value;
                if (disableKey.hasOwnProperty(pk_conmodel) && disableKey[pk_conmodel] === 'N') {
                    for (let key in item.values) {
                        item.values[key].disabled = true;
                    }
                }
            }
        });
    }

    /**
     * 清空表格
     */
    emptyTable() {
        this.props.editTable.setTableData(tableId, {rows: []})
    }

    /**
     * 设置表格 为浏览态
     */
    setTableBrowse(pageScope, moduleId, record) {
        this.props.editTable.setStatus(tableId, 'browse');
    }

    render() {
        let {editTable} = this.props;
        let {createEditTable} = editTable;
        return (
            <div className="table-info">
                {
                    createEditTable(tableId, {
                        showPagination: false, //是否展示分页
                        height: this.state.tableHeight,
                        showCheck: false,
                        showIndex: true,
                        onRowClick: this.onRowClick.bind(this),
                        onCloseModel: () => {
                            this.props.editTable.cancelEdit(tableId);
                        },
                        tableModelConfirm: this.setTableBrowse.bind(this)
                    })
                }
            </div>
        );
    }
}

export default TableInfo;